<template>
  <div class="editShop">
    <Form :model="formItem" :label-width="80" class="shopForm">
      <div class="item-title">基本信息</div>
      <FormItem label="绑定用户" style="width:380px;">
        <div style="display:flex;flex-direction:column">
          <span>
            {{formItem.worker_phone}}
            <Button type="primary" :style="formItem.worker_phone?'margin-left:50px':'margin-left:0px'" @click="showChoiceFn">点击选择</Button>
          </span>
          <span>不绑定用户，简历则无主</span>
        </div>
      </FormItem>
      <FormItem label="头像">
        <div v-if="formItem.worker_avatar" class="brand-item-logo disFlex">
          <img :src="formItem.worker_avatar">
          <upload :multiple="true" :spread="true" @confirmUpload="changeLogoFn"></upload>
        </div>
        <div
          v-else
          class="brand-item-environment new-add-brand-item-environment disFlex Flex-middle Flex-center"
          style="margin: 0;"
        >
          <span>+ 添加图片</span>
          <upload :multiple="true" :spread="true" @confirmUpload="changeLogoFn"></upload>
        </div>
      </FormItem>
      <FormItem label="姓名">
        <Input v-model="formItem.worker_nickname" placeholder="请输入姓名" style="width:200px;"></Input>
      </FormItem>
      <FormItem label="性别">
        <Select v-model="formItem.worker_gender" style="width:200px;">
          <Option v-for="(item,index) in gender" :key="index" :value="index+1">{{item}}</Option>
        </Select>
      </FormItem>
      <FormItem label="出生日期">
        <Row>
          <Col span="11">
            <DatePicker type="date" placeholder="请选择出生日期" v-model="formItem.worker_birthday"></DatePicker>
          </Col>
        </Row>
      </FormItem>
      <FormItem label="联系电话">
        <Input
          v-model="formItem.worker_phone"
          placeholder="请输入联系电话"
          style="width:200px;"
          @on-blur="checkPhone"
        ></Input>
      </FormItem>
      <FormItem label="最高学历">
        <Select v-model="formItem.worker_education" style="width:200px;">
          <Option v-for="(item,index) in educationArr" :key="index" :value="index">{{item}}</Option>
        </Select>
      </FormItem>
      <FormItem label="工作经验">
        <Select v-model="formItem.worker_experience" style="width:200px;">
          <Option v-for="(item,index) in experienceArr" :key="index" :value="index">{{item}}</Option>
        </Select>
      </FormItem>
      <FormItem label="求职状态">
        <Select v-model="formItem.worker_demand_status" style="width:200px;">
          <Option v-for="(item,index) in workerStates" :key="index" :value="index+1">{{item}}</Option>
        </Select>
      </FormItem>
      <FormItem label="个人简介">
        <Input
          v-model="formItem.worker_introduction"
          type="textarea"
          :autosize="{minRows: 5,maxRows: 10}"
          placeholder="请输入个人简介"
          style="width:400px;"
        ></Input>
      </FormItem>
      <div class="item-title">求职意向（必填）</div>
      <block v-for="(item,index) in formItem.demand" :key="index" v-if="index < 1">
        <FormItem label="工作性质">
          <Select v-model="item.job_type" style="width:200px;">
            <Option v-for="(item,index) in jobTypeArr" :key="index" :value="index+1">{{item}}</Option>
          </Select>
        </FormItem>
        <FormItem label="期望月薪">
          <Select v-model="item.salary_min" style="width:200px;" @on-change="initSalaryArr">
            <Option v-for="(item,index) in salaryArr[0]" :key="index" :value="item">{{item}}</Option>
          </Select>~
          <Select v-model="item.salary_max" style="width:200px;">
            <Option v-for="(item,index) in salaryArr[1]" :key="index" :value="item">{{item}}</Option>
          </Select>
        </FormItem>
        <FormItem label="工作地点">
          <Select v-model="item.area_id" style="width:200px;">
            <Option
              v-for="(item,index) in areaArr"
              :key="index"
              :value="Number(item.code)"
            >{{item.name}}</Option>
          </Select>
        </FormItem>
        <FormItem label="期望职位">
          <Select v-model="item.industry_id" style="width:300px" @on-change="getTwoMenu">
            <Option
              v-for="(item,index) in oneMenu"
              :key="index"
              :value="item.industry_id"
            >{{item.industry_title}}</Option>
          </Select>
          <Select v-model="item.position_id" style="width:300px" @on-change="getPosition">
            <Option
              v-for="(item,index) in twoMenu"
              :key="index"
              :value="item.position_id"
            >{{item.position_title}}</Option>
          </Select>
        </FormItem>
      </block>

      <div class="item-title space-between" @click="addExperience">
        <span>工作经历（选填）</span>
        <a style="color:#2d8cf0">添加工作经历</a>
      </div>
      <block v-for="(item,index) in formItem.experience" :key="index">
        <FormItem label="公司名称">
          <Input v-model="item.company" placeholder="请输入姓名" style="width:200px;"></Input>
        </FormItem>
        <FormItem label="职位名称">
          <Input v-model="item.position" placeholder="请输入姓名" style="width:200px;"></Input>
        </FormItem>
        <FormItem label="入职时间">
          <Row>
            <Col span="11">
              <DatePicker type="date" placeholder="请选择入职时间" v-model="item.date_entry"></DatePicker>
            </Col>
          </Row>
        </FormItem>
        <FormItem label="离职时间">
          <Row>
            <Col span="11">
              <DatePicker type="date" placeholder="请选择离职时间" v-model="item.date_resignation"></DatePicker>
            </Col>
          </Row>
        </FormItem>
        <FormItem label="工作内容">
          <Input
            v-model="item.worker_description"
            type="textarea"
            :autosize="{minRows: 5,maxRows: 10}"
            placeholder="请输入个人简介"
            style="width:400px;"
          ></Input>
        </FormItem>
        <div
          v-if="formItem.experience.length > 0"
          style="width:100%;height:1px;background:#EBEBEB;margin-bottom: 20px;"
        ></div>
      </block>
      <FormItem>
        <Button type="primary" @click="confirm">{{worderId==''?'新建':'保存'}}</Button>
        <Button style="margin-left: 8px" @click="back">返回</Button>
      </FormItem>
    </Form>
    <UserSelector ref="userSelector" @confirmChooseFn="confirmChooseFn"></UserSelector>
    <cancellationPeopleModal ref="cancellationPeopleModal" @commitPeopleFn="commitPeopleFn"></cancellationPeopleModal>
    <wxmap ref="wxmap" @commitMapFn="commitMapFn"></wxmap>
  </div>
</template>

<script>
import upload from "base/upload/upload";
import wxmap from "base/map/map";
import cancellationPeopleModal from "base/cancellationPeopleModal/cancellationPeopleModal";
import {
  Industry,
  UserSaasSelector,
  Provinces,
  Cities,
  Areas,
  workerArea
} from "api/recuit/public";
import { WorkderEdit, WorkderCreate } from "api/recuit/resume";
import UserSelector from "@/components/consumer/userSelector";

export default {
  name: "editShop",
  data() {
    return {
      worderId: "",
      formItem: {
        user_saas_id: "",
        worker_avatar: "",
        worker_nickname: "",
        worker_gender: "",
        worker_birthday: "",
        worker_phone: "",
        worker_education: "",
        worker_experience: "",
        worker_demand_status: "",
        worker_introduction: "",
        demand: [
          {
            industry_id: "",
            position_id: "",
            area_id: "",
            salary_min: 0,
            salary_max: 0,
            demand_status: 1,
            job_type: ""
          }
        ],
        experience: [
          // {
          //   company: "",
          //   position: "",
          //   date_entry: "",
          //   date_resignation: "",
          //   worker_description: ""
          // }
        ]
      },
      gender: ["男", "女"],
      jobTypeArr: ["全职", "兼职", "钟点工"],
      educationArr: [
        "未知",
        "小学",
        "初中",
        "中专",
        "高中",
        "大学专科",
        "大学本科",
        "硕士",
        "博士",
        "博士后",
        "其它"
      ],
      experienceArr: [
        "无经验",
        "1年",
        "2年",
        "3年",
        "4年",
        "5年",
        "6年",
        "7年",
        "8年",
        "9年",
        "10年"
      ],
      workerStates: [
        "在职_不考虑",
        "在职_考虑机会",
        "在职_月内到岗",
        "离职_随时到岗"
      ],
      salaryArr: [["面议"], [""]],
      areaArr: [],
      oneMenu: [], //行业一级菜单
      twoMenu: [], //行业二级菜单
    };
  },
  components: {
    upload,
    wxmap,
    cancellationPeopleModal,
    UserSelector
  },
  mounted() {
    this.initSalaryArr();
    this.getWorkerArea();
    Industry().then(result => {
      for (let i = 0; i < result.length; i++) {
        this.oneMenu.push(result[i]);
      }
    });
    if (this.$route.params.worderId) {
      let worderId = this.$route.params.worderId;
      this.worderId = worderId;
      this.getData(worderId);
    }
    // this.getData("3001");
  },

  methods: {
    //唤起用户选择器
    showChoiceFn() {
      this.$refs.userSelector.openModal(true);
    },
    //选择用户回调
    confirmChooseFn(data) {
      this.formItem.worker_phone = data.worker_phone;
      this.formItem.user_saas_id = data.user_saas_id;
      this.$refs.userSelector.openModal(false);
    },
    //时间处理
    getYmd(temp) {
      let date = new Date(temp);
      return (
        date.getFullYear() +
        "-" +
        (Number(date.getMonth()) + 1) +
        "-" +
        date.getDate()
      );
    },
    //添加工作经历
    addExperience() {
      let experience = {
        company: "",
        position: "",
        date_entry: "",
        date_resignation: "",
        worker_description: "",
        experience_status: 1
      };
      this.formItem.experience.push(experience);
    },
    //初始化薪资
    initSalaryArr(temp) {
      if (temp == "面议") {
        this.formItem.salary_min = 0;
        this.formItem.salary_max = 0;
      }
      let salaryArr = this.salaryArr;
      let salary = temp ? temp : 1000;
      salaryArr[1] = [];
      while (salary < 10000) {
        salary += salary < 5000 ? 100 : 500;
        salaryArr[0].push(salary);
        salaryArr[1].push(salary);
      }
    },
    //获取平台负责区
    getWorkerArea() {
      workerArea().then(result => {
        let areas = result.cities[0].areas;
        for (let i = 0; i < areas.length; i++) {
          this.areaArr.push(areas[i]);
        }
      });
    },
    //点击实现行业二级菜单
    getTwoMenu(industry_id) {
      let oneMenu = this.oneMenu;
      for (let i = 0; i < oneMenu.length; i++) {
        if (industry_id == oneMenu[i].industry_id) {
          this.twoMenu = oneMenu[i].position;
        }
      }
      this.formItem.demand[0].industry_id = industry_id;
    },
    getPosition(position_id) {
      this.formItem.demand[0].position_id = position_id;
    },
    //获取编辑的简历信息
    getData(worderId) {
      WorkderEdit({ worderId })
        .then(result => {
          this.formItem = result;
          //初始化二级职位
          for (let i = 0; i < result.demand.length; i++) {
            result.demand[i].industry_id &&
              this.getTwoMenu(result.demand[i].industry_id);
          }
        })
        .catch(err => {
          this.$Message.error(err);
        });
    },
    // 改变logo图片
    changeLogoFn(_url) {
      this.formItem.worker_avatar = _url[0];
    },
    // 手机号码验证正则
    checkPhone(e) {
      let phone = e.target.value;
      if (phone != "") {
        if (!/^1[34578]\d{9}$/.test(phone)) {
          this.$Message.error("手机号码格式有误");
        } else {
        }
      }
    },

    //编辑
    confirm() {
      let formItem = JSON.parse(JSON.stringify(this.formItem));
      if (!this.valiation(formItem)) {
        return;
      }
      // if (this.formItem.qualification_images.length > 0) {
      //时间格式转换
      for (let i = 0; i < formItem.experience.length; i++) {
        formItem.experience[i].date_entry = this.getYmd(
          formItem.experience[i].date_entry
        );
        formItem.experience[i].date_resignation = this.getYmd(
          formItem.experience[i].date_resignation
        );
      }

      // 期望职位、教育经历、工作经历数据类型转换
      formItem.demand = JSON.stringify(formItem.demand);
      formItem.experience = JSON.stringify(formItem.experience);
      formItem.education = JSON.stringify(formItem.education);

      WorkderCreate(formItem)
        .then(res => {
          this.$Message.success("操作成功");
          setTimeout(() => {
            this.$router.push({ name: "resumerCharge" });
          }, 1500);
        })
        .catch(err => {
          this.$Message.error(err);
        });
      // } else {
      //   this.$Message.error("请上传认证资料");
      // }
    },
    back() {
      this.$router.go(-1);
    },
    //校验必填项
    valiation(value) {
      if (!value.worker_avatar) {
        this.$Message.error("请上传头像");
        return false;
      }
      if (!value.worker_nickname) {
        this.$Message.error("请输入名称");
        return false;
      }
      if (!value.worker_gender) {
        this.$Message.error("请选择性别");
        return false;
      }
      if (!value.worker_birthday) {
        this.$Message.error("请选择出生日期");
        return false;
      }
      if (!value.worker_phone) {
        this.$Message.error("请输入联系方式");
        return false;
      }
      if (value.worker_education === "") {
        this.$Message.error("请选择最高学历");
        return false;
      }
      if (value.worker_experience === "") {
        this.$Message.error("请选择工作经验");
        return false;
      }
      if (value.worker_demand_status === "") {
        this.$Message.error("请选择求职状态");
        return false;
      }
      if (!value.worker_introduction) {
        this.$Message.error("请输入个人简介");
        return false;
      }
      if (value.demand[0].job_type === "") {
        this.$Message.error("请选择求职意向-工作性质");
        return false;
      }
      if (!value.demand[0].area_id) {
        this.$Message.error("请选择求职意向-工作地点");
        return false;
      }
      if (!value.demand[0].position_id) {
        this.$Message.error("请选择求职意向-期望职位");
        return false;
      }

      return true;
    }
  }
};
</script>

<style scoped lang="less">
.editShop {
  padding: 2%;
  background: white;
  .shopForm {
    width: 50%;
    .notice-user {
      padding: 10px;
      box-sizing: border-box;
      border-radius: 5px;
      border: 1px solid #ddd;
      max-width: 292px;
      min-height: 50px;
      min-width: 50px;
      cursor: pointer;

      img {
        float: left;
        margin-left: 10px;
        margin-top: 10px;

        &:nth-of-type(7n + 1) {
          margin-left: 0;
        }

        &:nth-of-type(1),
        &:nth-of-type(2),
        &:nth-of-type(3),
        &:nth-of-type(4),
        &:nth-of-type(5),
        &:nth-of-type(6),
        &:nth-of-type(7) {
          margin-top: 0;
        }
      }
    }
    .item-title {
      margin-bottom: 20px;
      padding: 8px 16px;
      font-weight: bolder;
      background-color: #f5f5f5;
      color: #333;
    }
    .space-between {
      display: flex;
      justify-content: space-between;
    }
    .brand-item-logo {
      width: 100px;
      height: 100px;
      padding: 5px;
      border: 1px solid #ddd;
      border-radius: 5px;
      cursor: pointer;
      position: relative;
      top: 0;
      left: 0;

      img {
        width: 100%;
      }
    }

    .dragImg {
      display: flex;
      overflow-x: scroll;
      max-width: 88%;
      margin-right: 12px;
      .goodsImages {
        margin-right: 16px;
        position: relative;

        &:hover {
          cursor: pointer;
          .close-modal {
            display: block;
          }
        }
        .close-modal {
          display: none;
          position: absolute;
          z-index: 2;
          top: 0;
          margin-right: 0;
          right: 0;
          width: 24px;
          height: 24px;
          font-size: 16px;
          line-height: 20px;
          color: #fff;
          text-align: center;
          cursor: pointer;
          background: red;
        }
      }
    }
    .brand-item-environment {
      width: 214px;
      height: 120px;
      padding: 5px;
      border: 1px solid #ddd;
      border-radius: 5px;
      position: relative;
      top: 0;
      left: 0;
      margin-left: 15px;
      overflow: hidden;
      margin-top: 10px;

      &:nth-of-type(2n + 1) {
        margin-left: 0;
      }

      img {
        width: 100%;
        height: 100%;
        float: left;
      }

      & > .close {
        background: red;
        position: absolute;
        top: 0;
        right: 0;
        width: 20px;
        height: 20px;
        cursor: pointer;
        color: #fff;
      }
    }

    .old-brand-item-environment {
      margin-left: 0;
      cursor: pointer;
    }

    .new-add-brand-item-environment {
      padding: 5px;
      border: 1px solid #ddd;
      border-radius: 5px;
      position: relative;
      top: 0;
      left: 0;
      margin-left: 15px;
      overflow: hidden;
      margin-left: 15px;
      cursor: pointer;
      width: 100px;
      height: 100px;
      margin-top: 29px;

      &:nth-of-type(2n + 1) {
        margin-left: 0;
      }

      img {
        width: 100%;
        height: 100%;
        float: left;
      }

      & > .close {
        background: red;
        position: absolute;
        top: 0;
        right: 0;
        width: 20px;
        height: 20px;
        cursor: pointer;
        color: #fff;
      }
    }
  }
  .userImgBlock {
    display: flex;
    align-items: center;
    width: 30%;
    margin-top: 1%;
  }
}
</style>
